<template>
  <div class="left">
      <div v-for="item in leftList" :key="item.id">
          <div>
              <p>id: {{ item.id }}</p>
              <p>title: {{ item.title }}</p>
              <p>create Date: {{ item.createDate }}</p>
          </div>
          <button @click="toRight(item.id)">ADD</button>
      </div>
  </div>
  <div class="right">
      <div v-for="item in rightList" :key="item.id">
          <div>
            <p>id: {{ item.id }}</p>
              <p>title: {{ item.title }}</p>
              <p>create Date: {{ item.createDate }}</p>
          </div>
          <button @click="toLeft(item.id)">REMOVE</button>
      </div>
  </div>
</template>

<script>
export default {
  data() {
      return {
          leftList:[
            {
              id: 1,
              title:'标题1',
              createDate:1029
            },
            {
              id: 2,
              title:'标题2',
              createDate:1029
            }
          ],
          rightList:[
          {
              id: 3,
              title:'标题3',
              createDate:1029
            }
          ]
      };
  },
  methods:{
    toRight(id){
      // 1 找到要移动的元素,移动到对应的数组
      this.leftList.forEach((item)=>{
        if(item.id === id) {
          this.rightList.push(item)
        }
      })
      // 2 将没有点击的过滤筛选留下来(filter)
      this.leftList = this.leftList.filter((item) => item.id !== id)
    },
    toLeft(id){
      // 1 找到要移动的元素,移动到对应的数组
      this.rightList.forEach((item)=>{
        if(item.id === id) {
          this.leftList.push(item)
        }
      })
      // 2 将没有点击的过滤筛选留下来(filter)
      this.rightList = this.rightList.filter((item) => item.id !== id)
    }
  }
};
</script>

<style scoped>
.left,
.right {
  width: 300px;
  height: 400px;
  background-color: #484646;
  padding: 10px;
  position: absolute;
  top: 50px;
}

.left > div,
.right > div {
  width: 100%;
  height: 120px;
  background-color: white;
  display: flex;
  justify-content: space-around;
  margin-bottom: 10px;
}

.left {
  left: 30px;
}
.right {
  left: 430px;
}
</style>
